<template>
  <div>
      <el-dialog :model-value="props.addInfo?.isShow" :title="props.addInfo?.isAdd ? '添加角色' : '编辑角色'" center @close="cancel">
          <el-form :model="roleForm" :rules="rules" ref="formRef">
              <el-form-item label="角色名称" :label-width="formLabelWidth" prop="rolename">
                  <el-input v-model="roleForm.rolename" autocomplete="off" />
              </el-form-item>

              <el-form-item label="角色权限" :label-width="formLabelWidth">
                  <el-tree 
                  ref="tree"
                  :data="store.getters['menu/getMenu']" 
                  :default-checked-keys="roleForm.menus.split(',')"
                  show-checkbox 
                  node-key="id"
                  default-expand-all
                  :props="{ children: 'children', label: 'title' }" 
                  check-strictly />
              </el-form-item>

              <el-form-item label="状态" :label-width="formLabelWidth">
                  <el-switch v-model="roleForm.status"
                      style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949;" :active-value="1"
                      :inactive-value="2" />
              </el-form-item>
          </el-form>
          <template #footer>
              <span class="dialog-footer">
                  <el-button @click='cancel'>取消</el-button>
                  <el-button type="primary" @click="confirm">
                      确定
                  </el-button>
              </span>
          </template>
      </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { useStore } from 'vuex';
import { defineProps, defineEmits, defineExpose } from 'vue';
import { ElMessage, FormInstance, FormRules } from 'element-plus';
import { roleadd, roleedit, roleinfo } from '../../request/api';
let store = useStore();
store.dispatch('menu/getMenuAction')
let props = defineProps({
  addInfo: Object
});
let emit = defineEmits(['cancel']);
let formLabelWidth = ref('120px');
let formRef = ref<FormInstance>();
let tree = ref<FormInstance>();
let roleForm = ref({
  rolename: '', //角色名称
  menus: "", //角色权限 (需要这种数据格式  1,2,3,4  )
  status: 1, //状态   1正常2禁用   number类型number
});
let rules = reactive<FormRules>({
  rolename: [
      { required: true, message: '请输入角色名称', trigger: 'blur' },
      { min: 2, max: 11, message: '长度 2 到 11 ', trigger: 'blur' },
  ]
});
let reset = () => {
  roleForm.value = reactive({
      rolename: '', //角色名称
      menus: "", //角色权限 (需要这种数据格式  1,2,3,4  )
      status: 1, //状态   1正常2禁用   number类型number
  });
  formRef.value?.resetFields();
  tree.value?.setCheckedKeys([])//重置树形控件
}
let cancel = () => {
  emit('cancel', false);
  reset()
};
let lookup = (id: number) => {
  roleinfo({ id }).then((res: any) => {
      if (res.code == 200) {
          roleForm.value = res.list;
          roleForm.value.id = id;
          // roleForm.value.menus ? tree.value?.setCheckedKeys(roleForm.value.menus.split(',')) : tree.value?.setCheckedKeys([])
          console.log(roleForm);
          
      } else {
          ElMessage.error(res.msg)
      }
  })
}
let confirm = () => {
  formRef.value?.validate((val) => {
      if (val) {
          roleForm.value.menus = tree.value?.getCheckedKeys().join(',');
          if (props.addInfo?.isAdd) {
              roleadd(roleForm.value).then((res: any) => {
                  if (res.code == 200) {
                      ElMessage.success('添加成功')
                      cancel();
                      store.dispatch('role/changeRoleAction')
                  } else {
                      ElMessage.error(res.data.msg)
                  }
              })
          } else {
              roleedit(roleForm.value).then((res: any) => {
                  if (res.code == 200) {
                      ElMessage.success('修改成功')
                      cancel();
                      store.dispatch('role/changeRoleAction')
                  } else {
                      ElMessage.error(res.msg)
                  }
              })
          }
      }
  })
};
defineExpose({
  lookup
})
</script>

<style scoped></style>